<template>
    <div class="sex">
        <div v-if="sex == 0" class="sex-w"><i class="fa fa-question"></i></div>
        <div v-if="sex == 1" class="sex-n">男</div>
        <div v-if="sex == 2" class="sex-v">女</div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Sex",
    props: {
        sex: {
            type: Number,
            default: 0,
        },
    },
});
</script>
<style scoped lang="scss">
.sex {
    & > div {
        width: 20px;
        height: 20px;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
        border-radius: 3px;
    }
    &-n {
        background-color: #0292f9;
    }
    &-v {
        background-color: #e304e1;
    }
    &-w {
        background-color: #737373;
    }
}
</style>